<!--
 * @Description: 视频学习模块
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-10-30 02:43:45
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-26 22:38:12
 * @FilePath: /lieshou-app/pages/video_learning.vue
-->

<template>
	<view class="page-content">
		<!-- 列表 -->
		<z-paging ref="paging" :hide-no-more-by-limit="10" :refresher-enabled="false" v-model="dataList"
			@query="queryList">

			<view slot="top">
				<z-nav title="能力提升" showBg="false" :showBack="false" color="#333"></z-nav>
				<!-- head轮播图模块 -->
				<view class="swiper-box">
					<view class="swiper-course">
						<uv-swiper @click="getSwiperItem" :list="swiperList"
							:indicator='swiperList&&swiperList.length>1' indicatorMode="dot"
							bgColor='rgba(255, 145, 200, 0)' height="286rpx" keyName="cover" :autoplay="false"
							duration='1000' radius='18'></uv-swiper>
					</view>
				</view>
				<!-- grad -->
				<view class="grad-box">
					<uv-row justify="space-between" gutter="10">
						<uv-col span="3" v-for="(item,index) in typeList" :key="index"
							@click="getGrid(item,index,'grad')">
							<view class="grad-list">
								<image class="icon" v-if='index==0' src="@/static/image/icon/grad-tab-icon1.png">
								</image>
								<image class="icon" v-if='index==1' src="@/static/image/icon/grad-tab-icon2.png">
								</image>
								<image class="icon" v-if='index==2' src="@/static/image/icon/grad-tab-icon3.png">
								</image>
								<image class="icon" v-if='index==3' src="@/static/image/icon/grad-tab-icon4.png">
								</image>
								<view class="grid-text" :style="tabactve===index?'color:#333;font-weight: bolder!important;':''">
									{{item.name}}
								</view>
							</view>

						</uv-col>
					</uv-row>
				</view>
				<view style="margin-left: 28rpx;margin-top: 38rpx;padding-bottom:20rpx;" @click="getGrid('','','label')">
					<zHeadLab :title='typeIns.name' :type-ins="typeIns" :isDownIcon="true">
					</zHeadLab>
				</view>
			</view>

			<!-- 活动列表 -->
			<view class="activity-modules">

				<zCourseList :list="dataList" type='course'></zCourseList>
			</view>

			
		</z-paging>
		<view style="width: 750rpx;height:100%;margin: 0 auto;">
			<uv-popup ref="popup" round='20rpx' mode="bottom" :close-on-click-overlay="false">
				<view class="pupup-title">
					课程类型
					<view class="pup-close" @click="closePup"><uv-icon name="close" size="38rpx"></uv-icon>
					</view>
				</view>
				<scroll-view scroll-y="true" class="pup-box">
					<view class="pup-list-box" v-if="typeList.length>0">
						<view class="pup-list" v-for="(item,index) in typeList[tabactve].labels" :key="index"
							@click="getTypeItem(item,index)">
							<view class="pup-list-name">
								<view class="pup-active" v-if="typeIns.courseIndex===index"></view>
								<view class="pup-box-name">{{item.name}}</view>
							</view>
							<view class="pup-list-title">共{{item.courses_learning.total}}门课
								已学{{item.courses_learning.learned}}门</view>
						</view>
						<view style="width:100%;height: 100rpx;"></view>
					</view>
				</scroll-view>
			</uv-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		onReady
	} from '@dcloudio/uni-app';
	import zHeadLab from '@/components/z-head-lab.vue';
	import zCourseList from '@/components/z-course-list.vue';
	import zHomeHead from '@/components/z-home-head.vue';
	import zNav from '@/components/z-nav.vue';
	export default {
		components: {
			zHeadLab,
			zCourseList,
			zHomeHead,
			zNav
		},
		data() {
			return {
				// 课程二级分类
				typeIns: {
					courseIndex: 0,
					name: '免费课',
					category_id: 7,
					label_id: 1
				},

				// 默认选中菜单
				tabactve: 0,
				// 轮播数据
				swiperList: [{
					"id": 1,
					"name": "test1",
					"cover": "https://img.js.design/assets/img/66a939f9cb8cbd1e8622a19c.jpg",
					"url": "https://www.baidu.com"
				}],
				// 是否开启底部弹窗
				ispupop: false,
				// 活动列表数据
				dataList: [],
				// 分类数据菜单栏
				typeList: [],
				autoplay: true,
				interval: 2000,
				duration: 1500,
			};
		},

		onLoad() {
			// #ifdef MP-WEIXIN
			this.$utils.showShare('分享免费学习的平台给你~', '', '')
			// #endif
			this.initType('initData')
			this.ininHeadBanner()
		},
		
		methods: {
			// 点击轮播图
			getSwiperItem(index) {
				console.log(this.swiperList[index], '====')
				uni.navigateTo({
					url: this.swiperList[index].url
				})
			},
			// 视频学习-banner
			ininHeadBanner() {
				this.$apis.getCoursesbanner({}).then((res) => {
					if (res.list && res.list.length > 0) {
						this.swiperList = res.list
					}

				}).catch(() => {

				})
			},
			async getTypeItem(item, index) {
				console.log('item', item)
				this.typeIns = {
					category_id: item.category_id,
					label_id: item.id,
					name: item.name,
					courseIndex: index,
					courses_learning: item.courses_learning
				}
				this.$forceUpdate()
				this.initType('')
				this.queryList(1, 10);
				this.$refs.popup.close();
			},
			// 获取课程分类
			async initType(type) {
				await this.$apis.getCoursesType({}).then((res) => {
					this.$utils.showLog('获取服务中心分类数据1', res)
					if (res.list && res.list.length > 0) {
						this.typeList = res.list
						// 初始化
						if (type === 'initData') {
							this.typeIns = {
								category_id: res.list[0].id,
								label_id: res.list[0].labels[0].id,
								name: res.list[0].labels[0].name,
								courseIndex: 0,
								courses_learning: res.list[0].labels[0].courses_learning,
							}
						}

					}

				}).catch(() => {

				})
			},
			// 切换分类
			getGrid(item, index, type) {
				if (type === 'grad') {
					console.log('===', item.labels, item)
					this.$nextTick(() => {
						this.tabactve = index
						this.typeIns = {
							courseIndex: 0,
							name: item.labels[0].name,
							category_id: item.labels[0].category_id,
							label_id: item.labels[0].id,
							courses_learning: item.labels[0].courses_learning,
						}
						// this.ispupop = this.ispupop
						this.queryList(1, 10)
						this.$forceUpdate()
					})
				} else {
					this.$refs.popup.open();
				}


			},
			closePup() {
				this.$refs.popup.close();
			},
			// 初始化加载数据
			queryList(pageNo, pageSize) {
				// 这里的请求只是演示，请替换成自己的项目的网络请求
				this.$apis.getCoursesList({
					page: pageNo,
					size: pageSize,
					category_ids: [this.typeIns.category_id],
					label_ids: [this.typeIns.label_id]
				}).then((res) => {
					this.$utils.showLog('获取服务中心课程列表数据', res)
					// 设置本地分页并将服务端返回的完整列表数据传给z-paging，滚动到底部会在本地进行分页数据拼接，不会触发分页请求。下拉刷新或reload时会重新触发queryList
					this.$refs.paging.complete(res.list);
				}).catch(() => {
					// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			}
		},
	};
</script>
<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		width: 750rpx;
		padding-top: 20rpx;
		text-align: center;
		display: flex;
		margin: 0 auto;
		align-items: center;

		.swiper-course {
			width: 694rpx;
			overflow: hidden !important;
			text-align: center;
			text-align: center;
			margin: 0 auto;

			image {
				object-fit: cover !important;
			}
		}
	}

	.grad-box {
		width: 694rpx;
		height: 160rpx;
		margin: 0 auto;
		margin-top: 32rpx;
		border-radius: 14rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.3);
		border: 2rpx solid rgba(255, 255, 255, 1);


		.grad-list {
			text-align: center;

			.icon {
				width: 72rpx;
				object-fit: cover;
				height: 72rpx;
				margin-top: 26rpx;
			}

			.grid-text {
				font-size: 24rpx;
				color: #333;
			}
		}



	}

	// 活动模块
	.activity-modules {
		width: 100%;
		text-align: center;
		margin-top: 32rpx;
	}

	// 

	.pupup-title {
		width: 100%;
		padding: 20rpx 0;
		font-weight: 700;
		text-align: center;
		position: relative;

		.pup-close {
			position: absolute;
			top: 18rpx;
			right: 44rpx;
		}
	}

	.pup-box {
		width: 750rpx;
		margin: 0 auto;
		height: 480rpx;
		border-radius: 20rpx 20rpx 0px 0px;

		.pup-list-box {
			width: 638rpx;
			margin: 0 auto;
			height: 100%;
			// overflow: auto;
			margin-top: 20rpx;
			padding-bottom: 50rpx;

			.pup-list {
				display: flex;
				width: 100%;
				height: 120rpx;
				line-height: 120rpx;
				// align-items: center;
				justify-content: space-between;
				// padding: 48rpx 0;
				border-bottom: 2rpx solid rgba(240, 240, 240, 1);

				.pup-list-name {
					// display: flex;
					position: relative;
					width: 400rpx;

					.pup-active {
						width: 62rpx;
						height: 61.92rpx;
						opacity: 1;
						position: absolute;
						top: 45rpx;
						will-change: transform, filter;
						background: linear-gradient(128.84deg, rgba(253, 145, 200, 1) 0%, rgba(255, 255, 255, 0) 100%);
						filter: blur(20px);

					}

					.pup-box-name {
						/** 文本1 */
						width: auto;
						font-size: 36rpx;
						// position: absolute;
						// top: 18rpx;
						// right:44rpx;
					}
				}

				.pup-list-title {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0px;
					color: rgba(71, 71, 71, 1);
					text-align: left;
					vertical-align: top;
				}
			}
		}

	}
</style>